<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期总结</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        生命函数总结
        一个8个生命函数 4对
        1：beforeCreate created beforeMounte mounted beforeUpdate updated beforeDestroy destroyed
        2:重要的 mounted beforeDestroy
     -->
    <div id="root">
        {{user | f1}}
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:function(){
            return{
                user:'liweihua'
            }
        },
        methods:{
            a(){}
        },
        computed:{
            c_user(){
                return 'c_liweihua'
            }
        },
        watch:{
           /*  user(newVal,oldVal){
                
            } */
           /*  user:{
                //
                deep:true,
                immediate:true,
                handler(newVal,oldVa){

                }
            } */
        },
        filters:{
            f1(val,val2){
                //val 为过滤符| 前面的值 val2 为参数
                return val.slice(0,2)
            }
        },
        directives:{
            fbing(){
                //dind update 没有inserted
            },
            fding2:{
                dind(element,binding){

                },
                inserted(element,binding){

                },
                dind(element,binding){

                }
            }
        }


    })

</script>
</html>